﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,height=device-height,inital-scale=1,maximum-scale=1.0,user-scalable=no">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="format-detection" content="email=no"/>
    <title>自助买单</title>
    <link type="text/css" rel="stylesheet" href="css/css.css">
</head>
<body>
<div class="weChat_mobile">
    <div class="payment_title">
        <ul>
            <li id="name">商户</li>
            <li class="payment_method">向你收款</li>
        </ul>
    </div>
    <div class="payment_amount">
        <p class="payment_amount_title">付款金额</p>
        <ul class="payment_money">
            <li>￥</li>
            <li><input id="input" type="text" value="" placeholder="输入金额" maxlength="6"></li>
        </ul>
        <p class="comments">*单笔交易金额1—5000元</p>
    </div>
    <div class="button">下一步</div>
</div>

<!--<div class="layer-content">-->
<!--<div class="form_edit clearfix">-->
<!--<div class="num">1</div>-->
<!--<div class="num">2</div>-->
<!--<div class="num">3</div>-->
<!--<div class="num">4</div>-->
<!--<div class="num">5</div>-->
<!--<div class="num">6</div>-->
<!--<div class="num">7</div>-->
<!--<div class="num">8</div>-->
<!--<div class="num">9</div>-->
<!--<div class="num">.</div>-->
<!--<div class="num">0</div>-->
<!--<div id="remove">删除</div>-->
<!--</div>-->
<!--</div>-->

<!--<div class="box"></div>-->


</body>
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script>
    var weChat_mobile = document.getElementsByClassName('weChat_mobile')[0];
    var browsers = document.getElementsByClassName('browser')[0];
    var button = document.getElementsByClassName('button')[0];
    var input = document.getElementById('input');

    //禁止弹出键盘
    $("#input").focus(function () {
        document.activeElement.blur();
    });

    /**
     * 九宫格数字键盘
     */
    (function () {
        input.onclick = function () {
            new KeyBoard(input);
        };
    })();
    (function (exports) {
        var KeyBoard = function (input, options) {
            var body = document.getElementsByTagName('body')[0];
            var DIV_ID = options && options.divId || '__w_l_h_v_c_z_e_r_o_divid';

            if (document.getElementById(DIV_ID)) {
                body.removeChild(document.getElementById(DIV_ID));
            }

            this.input = input;
            this.el = document.createElement('div');

            var self = this;
            var zIndex = options && options.zIndex || 1000;
            var width = options && options.width || '100%';
            var height = options && options.height || '277px';
            var fontSize = options && options.fontSize || '15px';
            var backgroundColor = options && options.backgroundColor || '#fff';
            var TABLE_ID = options && options.table_id || 'table_0909099';
            var mobile = typeof orientation !== 'undefined';

            this.el.id = DIV_ID;
            this.el.style.position = 'absolute';
            this.el.style.left = 0;
            this.el.style.right = 0;
            this.el.style.bottom = 0;
            this.el.style.zIndex = zIndex;
            this.el.style.width = width;
            this.el.style.height = height;
            this.el.style.backgroundColor = backgroundColor;

            //样式
            var cssStr = '<style type="text/css">';
            cssStr += '#' + TABLE_ID + '{text-align:center;width:100%;height:160px;border-top:1px solid #CECDCE;background-color:#FFF;}';
            cssStr += '#' + TABLE_ID + ' td{width:33%;height:60px;border:1px solid #ddd;border-right:0;border-top:0;font-size:20px}';
            if (!mobile) {
                cssStr += '#' + TABLE_ID + ' td:hover{background-color:#1FB9FF;color:#FFF;}';
            }
            cssStr += '</style>';

            //Button
            var btnStr = '<div style="width:60px;height:28px;background-color:#1FB9FF;';
            btnStr += 'float:right;margin-right:5px;text-align:center;color:#fff;';
            btnStr += 'line-height:28px;border-radius:3px;margin-bottom:5px;cursor:pointer; margin-top: 5px;">完成</div>';

            //table
            var tableStr = '<table id="' + TABLE_ID + '" border="0" cellspacing="0" cellpadding="0">';
            tableStr += '<tr><td>1</td><td>2</td><td>3</td></tr>';
            tableStr += '<tr><td>4</td><td>5</td><td>6</td></tr>';
            tableStr += '<tr><td>7</td><td>8</td><td>9</td></tr>';
            tableStr += '<tr><td style="background-color:#D3D9DF;">.</td><td>0</td>';
            tableStr += '<td style="background-color:#D3D9DF;">删除</td></tr>';
            tableStr += '</table>';
            this.el.innerHTML = cssStr + btnStr + tableStr;

            function addEvent(e) {
                var ev = e || window.event;
                var clickEl = ev.element || ev.target;
                var value = clickEl.textContent || clickEl.innerText;
                var amount = input.value;
                if (clickEl.tagName.toLocaleLowerCase() === 'td' && value !== "删除") {
                    if (self.input) {
                        self.input.value += value;
                        numberChange()
                    }
                    if (input.value !== "") {
                        button.style.background = "#76cbbb";
                        input.style.color = "#444444"
                    }
                    else {
                        button.style.background = "#cfcfd9";
                        input.style.color = "#909090"
                    }
                    if (input.value > 5000) {
                        input.value = amount
                    }
                } else if (clickEl.tagName.toLocaleLowerCase() === 'div' && value === "完成") {
                    body.removeChild(self.el);
                } else if (clickEl.tagName.toLocaleLowerCase() === 'td' && value === "删除") {
                    var num = self.input.value;
                    if (num) {
                        var newNum = num.substr(0, num.length - 1);
                        self.input.value = newNum;
                    }
                    if (input.value !== "") {
                        button.style.background = "#76cbbb";
                        input.style.color = "#444444"
                    }
                    else {
                        button.style.background = "#cfcfd9";
                        input.style.color = "#909090"
                    }
                    if (input.value.length > 6) {
                        input.value = input.value.slice(0, 6)
                    }
                }
            }

            if (mobile) {
                this.el.ontouchstart = addEvent;
            } else {
                this.el.onclick = addEvent;
            }
            body.appendChild(this.el);
        }

        exports.KeyBoard = KeyBoard;

    })(window);

    function numberChange() {
        //此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
        if (input.value.indexOf(".") < 0 && input.value != "") {
            if (input.value.substr(0, 1) == '0' && input.value.length == 2) {
                input.value = input.value.substr(1, input.value.length - 1);
            }
        }
        //只保留第一个. 清除多余的
        input.value = input.value.replace(/\.{2,}/g, ".");
        //不能重复出现点
        input.value = input.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
        //只能输入两个小数
        input.value = input.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
        //必须保证第一个为数字而不是.
        input.value = input.value.replace(/^\./g, "")

    }
    $('#name').html(getRequest()["m"]);

    /**
     * 提交申请
     */
    $(".button").click(function () {
        var token = getQueryString("t");
        // var dealUserId = "6abc5879899897b4927d2f233ad0f535";
        var fee = $('#input').val() * 100;
        // var payMode = getQueryString("payMode");
        // var openId = getQueryString("openId");
        // var userId = getQueryString("userId");
        if (fee == "") {
            alert("请输入有效金额")
        } else {
            $.ajax({
                url: 'https://wallet.seshell.cn/api/qrpay/qrOrder',
                type: 'POST',
                data: {token: token, fee: fee, type: 1},
                dataType: "json",
                success: function (data) {
                    window.location.href = data.data
                }
            })
        }
    })


</script>
</html>